<template>
  <div id="screen" class="data_board_wrapper">
    <div class="screen">
      <div class="header">
        <div class="name">萧山区固废清洁直运大数据管理平台</div>
        <img class="logo" src="@/assets/imgs/logo2.png" alt="" />
        <span class="line"></span>
        <img class="logo logo2" src="@/assets/imgs/logo.png" alt="" />
        <div class="option">
          <img class="type-option" src="@/assets/imgs/图层 169.png" alt="" />
          <img class="type-option2" src="@/assets/imgs/图层 170.png" alt="" />
          <span class="text1 text0">综合管控</span>
          <span class="text2 text0"> 车辆管理</span>
          <span class="text3 text0">人员管理</span>
          <span class="text4 text0">中转焚烧厂</span>
          <span class="text5 text0">智慧监控</span>
          <span class="text6 text0">其他管理</span>
        </div>
        <div class="environment">
          <div class="time">
            <p>09:21:20</p>
            <p>2020.05.20</p>
          </div>
          <span class="line"></span>
          <div class="time">
            <p>18~30°C</p>
            <p>晴</p>
          </div>
          <span class="line"></span>
          <div class="time">
            <p>PM2.5</p>
            <p>50</p>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="left_content">
          <div class="todayWaste">
            <img
              class="todayWasteIcon"
              src="@/assets/imgs/图层 10.png"
              alt=""
            />
            <div class="title">
              <span class="title1">今日实时垃圾量</span>
              <span class="title2">/SOLIDWASTE</span>
            </div>
            <div class="showWaste">
              <div class="showType">
                <img src="@/assets/imgs/组 44.png" alt="" />
                <p class="optionText">车辆上</p>
                <p class="numText">108T</p>
              </div>
              <div class="showType">
                <img src="@/assets/imgs/组 45.png" alt="" />
                <p class="optionText">车辆上</p>
                <p class="numText">108T</p>
              </div>
              <div class="showType">
                <img src="@/assets/imgs/组 46.png" alt="" />
                <p class="optionText">车辆上</p>
                <p class="numText">108T</p>
              </div>
            </div>
          </div>
          <div class="SevenRefuse">
            <img
              class="todayWasteIcon"
              src="@/assets/imgs/图层 10.png"
              alt=""
            />
            <div class="title">
              <span class="title1">七日垃圾量趋势</span>
              <span class="title2">/SOLIDWASTE</span>
            </div>
            <div class="echart_content" id="echart_content"></div>
          </div>
          <div class="todayStop">
            <img
              class="todayWasteIcon"
              src="@/assets/imgs/图层 22.png"
              alt=""
            />
            <div class="title">
              <span class="title1">今日实时停车场</span>
              <span class="title2">/SOLIDWASTE</span>
            </div>
            <div class="stopType">
              <div class="parkingLot">
                <div class="parkingLotNum">
                  <span>24</span>
                </div>
                <p>东门停车车厂</p>
              </div>
              <div class="parkingLot">
                <div class="parkingLotNum">
                  <span>24</span>
                </div>
                <p>东门停车厂</p>
              </div>
              <div class="parkingLot">
                <div class="parkingLotNum">
                  <span>24</span>
                </div>
                <p>东门停车厂</p>
              </div>
              <div class="parkingLot">
                <div class="parkingLotNum">
                  <span>24</span>
                </div>
                <p>东门停车厂</p>
              </div>
            </div>
            <div class="parkingLot_echart" id="parkingLot_echart"></div>
          </div>
          <div class="todayCarWash">
            <img
              class="todayWasteIcon"
              src="@/assets/imgs/图层 25.png"
              alt=""
            />
            <div class="title">
              <span class="title1">今日车辆清洗</span>
              <span class="title2">/SOLIDWASTE</span>
            </div>
            <div class="todayCarWash_echart" id="todayCarWash_echart"></div>
          </div>
        </div>
        <div class="center_content">
          <div class="mapEchart" id="container"></div>
          <div class="center_bottom">
            <div class="bottm_left"></div>
          </div>
        </div>
        <div class="right_content">
          <div class="todayOnline">
            <img
              class="todayWasteIcon"
              src="@/assets/imgs/图层 26.png"
              alt=""
            />
            <div class="title">
              <span class="title1">今日上岗车辆</span>
              <span class="title2">/SOLIDWASTE</span>
            </div>
            <ul class="online-list">
              <li class="list-content">
                <div class="list_info">
                  <div style="color: #fff">浙A.5k286</div>
                  <div>青大勇</div>
                  <div style="color: #fff">青大勇</div>
                  <div style="color: #fff">青大勇</div>
                </div>
              </li>
              <li class="list-content">
                <div class="list_info">
                  <div style="color: #fff">浙A.5k286</div>
                  <div>青大勇</div>
                  <div style="color: #fff">青大勇</div>
                  <div style="color: #fff">青大勇</div>
                </div>
              </li>
              <li class="list-content">
                <div class="list_info">
                  <div style="color: #fff">浙A.5k286</div>
                  <div>青大勇</div>
                  <div style="color: #fff">青大勇</div>
                  <div style="color: #fff">青大勇</div>
                </div>
              </li>
              <li class="list-content">
                <div class="list_info">
                  <div style="color: #fff">浙A.5k286</div>
                  <div>青大勇</div>
                  <div style="color: #fff">青大勇</div>
                  <div style="color: #fff">青大勇</div>
                </div>
              </li>
              <li class="list-content">
                <div class="list_info">
                  <div style="color: #fff">浙A.5k286</div>
                  <div>青大勇</div>
                  <div style="color: #fff">青大勇</div>
                  <div style="color: #fff">青大勇</div>
                </div>
              </li>
            </ul>
          </div>
          <div class="clockingRecord">
            <img
              class="todayWasteIcon"
              src="@/assets/imgs/图层 28.png"
              alt=""
            />
            <div class="title">
              <span class="title1">人员打卡情况</span>
              <span class="title2">/SOLIDWASTE</span>
            </div>
            <div class="user_info">
              <div class="user_icon" v-for="item in 10" :key="item">
                <img src="" alt="" />
                <p>张敏红</p>
              </div>
            </div>
          </div>
          <div class="forewarn">
            <img
              class="todayWasteIcon"
              src="@/assets/imgs/图层 30.png"
              alt=""
            />
            <div class="title">
              <span class="title1">预警情况</span>
              <span class="title2">/SOLIDWASTE</span>
            </div>
            <div class="forewarnType">
              <div class="forewarnOption">人员(7)</div>
              <div class="forewarnOption">人员(7)</div>
              <div class="forewarnOption">人员(7)</div>
              <div class="forewarnOption">人员(7)</div>
            </div>
            <div class="forewarnList">
              <div class="forewarnContent">
                <div class="round"></div>
                <div>浙A-7Z627</div>
                <div>保养将在5天后到期</div>
              </div>
              <div class="forewarnContent">
                <div class="round"></div>
                <div>浙A-7Z627</div>
                <div>保养将在5天后到期</div>
              </div>
              <div class="forewarnContent">
                <div class="round"></div>
                <div>浙A-7Z627</div>
                <div>保养将在5天后到期</div>
              </div>
              <div class="forewarnContent">
                <div class="round"></div>
                <div>浙A-7Z627</div>
                <div>保养将在5天后到期</div>
              </div>
              <div class="forewarnContent">
                <div class="round"></div>
                <div>浙A-7Z627</div>
                <div>保养将在5天后到期</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      map: null,
    };
  },
  created() {},

  mounted() {
    function setScale() {
      const designWidth = 1920;
      const scale = document.documentElement.clientWidth / designWidth;
      document.querySelector(
        "#screen"
      ).style.transform = `scale(${scale}) translate3d(0%, 0%, 0)`;
    }
    setScale();
    window.onresize = function () {
      setScale();
    };
    this.initSevenRefuse();
    this.initParkingLot();
    this.initTodayCarWash();
    this.initMap();
  },
  methods: {
    // 七天垃圾趋势图
    initSevenRefuse() {
      var chartDom = document.getElementById("echart_content");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["11日", "12日", "13日", "14日", "15日", "16日", "17日"],
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              opacity: 0.2,
              color: ["#929191"],
            },
          },
        },
        legend: {
          show: true,
          bottom: 30,
          textStyle: {
            color: "#fff",
          },
          data: ["焚烧厂", "中转站"],
        },
        grid: {
          left: "3%",
          right: "4%",
          top: "14%",
          // bottom: "25%",
          containLabel: true,
        },
        series: [
          {
            data: [820, 932, 901, 934, 290, 330, 320],
            type: "line",
            name: "焚烧厂",
            smooth: true,
            lineStyle: {
              // 设置线条的style等
              normal: {
                color: "#228F96", // 折线线条颜色:红色
              },
            },
            areaStyle: {
              color: "#228F96",
            },
          },
          {
            data: [620, 332, 901, 634, 690, 330, 520],
            type: "line",
            name: "中转站",
            smooth: true,
            lineStyle: {
              // 设置线条的style等
              normal: {
                color: "#305694", // 折线线条颜色:红色
              },
            },
            areaStyle: {
              color: "#305694",
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    // 今日实时停车场
    initParkingLot() {
      var chartDom = document.getElementById("parkingLot_echart");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["0时", "4时", "8时", "12时", "16时", "20时", "24时"],
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              opacity: 0.2,
              color: ["#929191"],
            },
          },
        },
        legend: {
          show: true,
          bottom: 30,
          textStyle: {
            color: "#fff",
          },
          data: ["进入", "出去"],
        },
        grid: {
          left: "8%",
          right: "4%",
          top: "14%",
          bottom: "25%",
          containLabel: true,
        },
        series: [
          {
            data: [20, 32, 81, 34, 70, 60, 32],
            type: "line",
            name: "进入",
            smooth: true,
            lineStyle: {
              // 设置线条的style等
              normal: {
                color: "#228F96", // 折线线条颜色:红色
              },
            },
            areaStyle: {
              color: "#228F96",
            },
          },
          {
            data: [40, 22, 34, 54, 50, 20, 82],
            type: "line",
            smooth: true,
            name: "出去",
            lineStyle: {
              // 设置线条的style等
              normal: {
                color: "#305694", // 折线线条颜色:红色
              },
            },
            areaStyle: {
              color: "#305694",
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    // 今日车辆清洗
    initTodayCarWash() {
      var chartDom = document.getElementById("todayCarWash_echart");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: "category",
          data: ["新区", "新区", "新区", "新区"],
          axisTick: {
            alignWithLabel: true,
          },
        },
        grid: {
          left: "8%",
          right: "4%",
          top: "14%",
          bottom: "25%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              opacity: 0.2,
              color: ["#929191"],
            },
          },
        },
        series: [
          {
            data: [120, 200, 150, 80],
            barWidth: "30%",
            type: "bar",
            itemStyle: {
              // 柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                // 柱形图圆角，初始化效果
                barBorderRadius: [15, 15, 0, 0],
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    // 渲染地图
    initMap() {
      // this.map = new BMap.Map("container"); // 创建Map实例
      // var point = new BMap.Point(116.404, 39.915); // 创建点坐标
      // this.map.centerAndZoom(point, 15);
    },
  },
};
</script>

<style lang="scss" scoped>
.line {
  display: inline-block;
  height: 28px;
  border-left: 1px #fff solid;
  transform: scaleX(0.5);
  margin-left: 10px;
}

.data_board_wrapper {
  min-width: 1920px;
  min-height: 100vh;
  background: url("@/assets/imgs/bigBG.jpg");
  background-size: 100% 100%;
  color: #fff;
  transform-origin: 0 0;
  .screen {
    display: inline-block;
    min-width: 1920px;
    min-height: 100vh;
    .header {
      width: 100%;
      height: 80px;
      position: relative;
      background: url("@/assets/imgs/headerBG.png") no-repeat;
      background-size: 100% 100%;
      overflow: hidden;
      .name {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        line-height: 70px;
        color: #fff;
      }

      .logo {
        margin: 35px 0 0 20px;
      }
      .logo2 {
        margin-left: 10px;
      }
      .type-option {
        position: absolute;
        top: 25px;
        left: 320px;
      }
      .type-option2 {
        position: absolute;
        top: 25px;
        left: 1250px;
      }
      .option {
        .text0 {
          z-index: 999;
          position: absolute;
          top: 32px;
          color: #fff;
        }
        .text1 {
          left: 352px;
        }
        .text2 {
          left: 468px;
        }
        .text3 {
          left: 586px;
        }
        .text4 {
          left: 1272px;
        }
        .text5 {
          left: 1397px;
        }
        .text6 {
          left: 1515px;
        }
      }
      .environment {
        color: #fff;
        position: absolute;
        right: 20px;
        top: 25px;
        .time {
          text-align: right;
          margin-right: 5px;
          margin-left: 5px;
          display: inline-block;
        }
      }
    }
    .content {
      display: flex;
      justify-content: center;
      height: 80%;
      overflow: hidden;
      .todayWasteIcon {
        margin: 20px 0 0 25px;
      }
      .left_content {
        width: 20%;
        .todayWaste {
          width: 100%;
          // height: 200px;
          background: url("@/assets/imgs/板块背景.png");
          background-size: 100% 100%;
          position: relative;
          overflow: hidden;
          .title {
            position: absolute;
            top: 18px;
            left: 50px;
            color: #4ea9c5;
            .title1 {
              margin-right: 10px;
            }
            .title2 {
              font-size: 12px;
            }
          }
          .showWaste {
            display: flex;
            margin: 20px auto;
            justify-content: space-between;
            width: 76%;
            text-align: center;
            .showType {
              height: 120px;
              .optionText {
                color: #4ea9c5;
                margin: 5px 0;
                font-size: 14px;
              }
              .numText {
                font-size: 20px;
              }
            }
          }
        }
        .SevenRefuse {
          width: 100%;
          background: url("@/assets/imgs/板块背景2.png");
          background-size: 100% 100%;
          position: relative;
          overflow: hidden;
          .title {
            position: absolute;
            top: 18px;
            left: 50px;
            color: #4ea9c5;
            .title1 {
              margin-right: 10px;
            }
            .title2 {
              font-size: 12px;
            }
          }
          .echart_content {
            width: 90%;
            margin: 0 auto;
            height: 200px;
          }
        }
        .todayStop {
          width: 100%;
          background: url("@/assets/imgs/板块背景3.png");
          background-size: 100% 100%;
          position: relative;
          overflow: hidden;
          .title {
            position: absolute;
            top: 18px;
            left: 50px;
            color: #4ea9c5;
            .title1 {
              margin-right: 10px;
            }
            .title2 {
              font-size: 12px;
            }
          }
          .stopType {
            margin: 10px auto;
            width: 83%;
            display: flex;
            justify-content: space-between;
            .parkingLot {
              position: relative;
              text-align: center;
              .parkingLotNum {
                width: 65px;
                height: 65px;
                margin: 0 auto;
                background: url("@/assets/imgs/图层 24 副本 2.png");
                background-size: 100% 100%;
                span {
                  font-size: 24px;
                  font-weight: bold;
                  line-height: 65px;
                }
              }

              p {
                font-size: 14px;
              }
            }
          }
          .parkingLot_echart {
            width: 95%;
            height: 200px;
          }
        }
        .todayCarWash {
          width: 100%;
          background: url("@/assets/imgs/板块背景.png");
          background-size: 100% 100%;
          position: relative;
          overflow: hidden;
          .title {
            position: absolute;
            top: 18px;
            left: 50px;
            color: #4ea9c5;
            .title1 {
              margin-right: 10px;
            }
            .title2 {
              font-size: 12px;
            }
          }
          .todayCarWash_echart {
            width: 100%;
            height: 200px;
          }
        }
      }
      .center_content {
        width: 60%;
        background-color: rgb(186, 127, 32);
        height: 400px;
      }
      .right_content {
        width: 20%;
        .todayOnline {
          width: 100%;
          background: url("@/assets/imgs/板块背景4.png");
          background-size: 100% 100%;
          position: relative;
          overflow: hidden;
          .title {
            position: absolute;
            top: 18px;
            left: 60px;
            color: #4ea9c5;
            .title1 {
              margin-right: 10px;
            }
            .title2 {
              font-size: 12px;
            }
          }
          .online-list {
            overflow: hidden;
            margin: 5px 0;
            .list-content {
              width: 78%;
              color: #4ea9c5;
              line-height: 30px;
              margin: 0 auto;
              height: 30px;
              .list_info {
                display: flex;
                justify-content: space-between;
              }
            }
          }
        }
        .clockingRecord {
          width: 100%;
          background: url("@/assets/imgs/板块背景4.png");
          background-size: 100% 100%;
          position: relative;
          overflow: hidden;
          .title {
            position: absolute;
            top: 18px;
            left: 50px;
            color: #4ea9c5;
            .title1 {
              margin-right: 10px;
            }
            .title2 {
              font-size: 12px;
            }
          }
          .user_info {
            width: 82%;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .user_icon {
              width: 60px;
              height: 60px;
              font-size: 14px;
              margin: 10px 0;
              img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
              }
            }
          }
        }
        .forewarn {
          width: 100%;
          background: url("@/assets/imgs/板块背景7.png");
          background-size: 100% 100%;
          position: relative;
          overflow: hidden;
          .title {
            position: absolute;
            top: 18px;
            left: 50px;
            color: #4ea9c5;
            .title1 {
              margin-right: 10px;
            }
            .title2 {
              font-size: 12px;
            }
          }
          .forewarnType {
            display: flex;
            justify-content: flex-end;
            width: 100%;
            .forewarnOption {
              width: 65px;
              height: 30px;
              margin-right: 10px;
              text-align: center;
              line-height: 30px;
              background: #4ea9c5;
              border-radius: 4px;
            }
          }
          .forewarnList {
            .forewarnContent {
              display: flex;
              margin: 20px 0;
              div {
                margin-right: 10px;
              }
              .round {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                border: 1px #4ea9c5 solid;
                margin: 5px 10px 0 30px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
